import React from 'react'
import { Carousel, WingBlank,NavBar,Icon,Card,WhiteSpace, Button,PullToRefresh } from 'antd-mobile'
import ReactDOM from 'react-dom'
import Footer from '../../components/Footer/index';
import axios from '../../axios/index'
import {CONFIG} from '../../config/index'
export default class Products extends React.Component{
    constructor(props) {
        super(props);
        this.pageNo=0;
        this.rData=[];
        this.state = {
            refreshing: true,
            down: false,
            height: document.documentElement.clientHeight,
            imagesData:[],
        };
      }
    
      getData(){
        this.pageNo++; 
       return axios.ajax({
            url:'/api/v1/customer_service/recommendedProducts',
            method:'get',
            data:{
                page:this.pageNo
            }
        }).then((res)=>{
            if(res.code===0){
                if(res.data.data){
                    this.setState({
                        refreshing:false
                    });
                    return res.data.data;
                    
                }            
            }
        });
      }
      componentDidMount() {
        const hei = this.state.height - ReactDOM.findDOMNode(this.ptr).offsetTop;
        this.getData().then((value)=>{
            this.rData=[...value];
            this.setState({
                imagesData:this.rData
            });
        });
       
        this.setState({
            height: hei,
            refreshing:false                  
        });
      }
      onRefresh=()=>{
        this.setState({ refreshing: true });
        this.getData().then((value)=>{
            console.log('新的产品列表:',value);
            this.rData.push(...value);
            this.setState({
                imagesData:this.rData
            });

        });
      }
    render(){
        return(
            <div style={{marginBottom:'50px'}}>
                <NavBar
                    mode="light"
                    leftContent="返回"
                    icon={<Icon type="left" />}
                    onLeftClick={() => console.log('onLeftClick')}
                    rightContent={[
                        <Icon key="1" type="ellipsis" />,
                    ]}
                >精选产品</NavBar>
                 {/* <Button
                    style={{ marginBottom: 15 }}
                    onClick={() => this.setState({ down: !this.state.down })}
                >
                    direction: {this.state.down ? 'down' : 'up'}
                </Button> */}
                <PullToRefresh
                    damping={60}
                    ref={el => this.ptr = el}
                    style={{
                    height: this.state.height,
                    overflow: 'auto',
                    }}
                    indicator={this.state.down ? {} : { deactivate: '上拉可以刷新' }}
                    direction={this.state.down ? 'down' : 'up'}
                    refreshing={this.state.refreshing}
                    onRefresh={this.onRefresh}

                >
                    {this.state.imagesData.map(val=>(
                                <WingBlank key={val.id}  size="xl">
                                <WhiteSpace size="xl" />
                                <Card onClick={()=>{
                                    window.location.href=val.url;
                                }}>
                                <Card.Header
                                    title={
                                        <div> 
                                            <span style={{fontSize:'14px'}}>{val.name}</span>
                                            <span style={{fontSize:'12px',color:'#999999'}}>{val.brief}</span>
                                        </div>
                                    }
                                />
                                <Card.Body >
                                    <div>
                                        <img alt="" src={CONFIG.IMAGE_BASE_URL+val.banner}
                                        style={{ width: '100%',height:'120px',borderRadius:'15px'}}/>
                                    </div>
                                </Card.Body>
                            
                                </Card>
                                <WhiteSpace size="xl" />
                            </WingBlank>
                            ))}
                </PullToRefresh>
               
                <Footer selectTab='products'/>
            </div>
        );
    }
}